<!-- 答题页 -->
<template>
    <page-view-top-nav :element="element" />
    <div class="question-answer-wrap">
        <img :src="customFeature.style['background-image']" class="background-mark" />

        <div class="content-wrap">
            <div class="content-title" :style="[customFeature.questionNumber.style]">题目：1/4</div>
            <div class="content-details">
                <div class="details-tag">单选</div>
                <div class="content-details-text">中国汉字的创造者是（）。</div>

                <div class="option-list">
                    <div class="option-item">
                        <div class="option-tag" :style="[customFeature.radioButton.style]">A</div>
                        <div class="option-text">黄帝</div>
                    </div>
                    <div class="option-item">
                        <div class="option-tag" :style="[customFeature.radioButton.style]">B</div>
                        <div class="option-text">燧人氏</div>
                    </div>
                    <div class="option-item">
                        <div class="option-tag" :style="[customFeature.radioButton.style]">C</div>
                        <div class="option-text">仓颉</div>
                    </div>
                    <div class="option-item">
                        <div class="option-tag" :style="[customFeature.radioButton.style]">D</div>
                        <div class="option-text">神农氏</div>
                    </div>
                </div>

                <div class="submit-btn" :style="[customFeature.submitButton.style]">确认答案</div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import PageViewTopNav from '../../page-view-top-nav'
export default defineComponent({
    name: 'QuestionAnswer',
    components: {
        PageViewTopNav
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        const customFeature = computed(() => element.value?.customFeature || {})

        return {
            element,
            customFeature
        }
    }
})
</script>

<style lang="less" scoped>
@import './question-answer.less';
</style>